<template>
  <a-layout id="components-layout">

    <a-layout-sider
      :trigger="null"
      collapsible
      v-model="collapsed"
    >
      <div class="logo">
           <!-- <img class="logo" src="@/assets/logo.png"> -->
      </div>
      <a-menu
          mode="inline"
          theme="dark"
          :openKeys="openKeys"
          @openChange="onOpenChange"
          :selectedKeys="selectedKeys"
        >
        <template v-for="menu in menus">
          <a-sub-menu v-if="menu.children && hasAuthority(menu.authoritys)" :key="menu.key">
            <span slot="title"><a-icon type="mail" /><span>{{menu.title}}</span></span>
            <template v-for="child in menu.children">
              <a-menu-item :data-route="child.route" v-if="hasAuthority(child.authoritys)" :data-path="child.path" :key="child.key" @click="onClickMenu">{{child.title}}</a-menu-item>
            </template>
          </a-sub-menu>
        </template>
      </a-menu>
    </a-layout-sider>

    <a-layout>
      <a-layout-header class="header">
        <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="()=> collapsed = !collapsed"
        />
        <a-dropdown class="avatar">
          <a-avatar class="avatar" v-if="photoUrl" :src="photoUrl" size="large" style="backgroundColor:#87d068"/>
          <a-avatar class="avatar" v-else size="large" style="backgroundColor:#87d068" icon="user">{{nickName}}</a-avatar>
          <a-menu slot="overlay">
            <!--<a-menu-item key="0">
              <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">1st menu item</a>
            </a-menu-item>
            <a-menu-item key="1">
              <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">2nd menu item</a>
            </a-menu-item>
            <a-menu-divider /> -->
            <a-menu-item key="1"><a @click="onUserinfo" rel="noopener noreferrer">个人资料</a></a-menu-item>
            <a-menu-item key="2"><a @click="onPassword" rel="noopener noreferrer">修改密码</a></a-menu-item>
            <a-menu-item key="3"><a @click="onLogout" rel="noopener noreferrer">退出</a></a-menu-item>
          </a-menu>
        </a-dropdown>
      </a-layout-header>
      <a-layout-content :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }">
       <template v-if="panes.length==0">
         这里是欢迎页
       </template>
       <c-content-tabs v-else :aKey="activeKey" :panes="panes" @removeTab="onRemoveTab" @changeTab="onChangeTab"/>
      </a-layout-content>
    </a-layout>
    <keep-alive>
    <userinfo
      title="个人资料"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"/>
    </keep-alive>
    <keep-alive>
    <password
      title="修改密码"
      :visible="visibleForPassword"
      @ok="handleOkForPassword"
      @cancel="handleCancelForPassword"/>
    </keep-alive>
  </a-layout>
</template>
<script>
// import serv from './IndexService'
import cContentTabs from '../components/ContentTabs'
import menus from './menus'
import Userinfo from './user/Userinfo'
import Password from './user/Password'
import {Layout, Menu, Icon, Dropdown, Avatar} from 'ant-design-vue'
import Vue from 'vue'
Vue.component(Layout.name, Layout)
Vue.component(Layout.Content.name, Layout.Content)
Vue.component(Layout.Sider.name, Layout.Sider)
Vue.component(Layout.Header.name, Layout.Header)
Vue.component(Menu.name, Menu)
Vue.component(Menu.Item.name, Menu.Item)
Vue.component(Menu.SubMenu.name, Menu.SubMenu)
Vue.component(Icon.name, Icon)
Vue.component(Dropdown.name, Dropdown)
Vue.component(Avatar.name, Avatar)
export default {
  name: 'Index',
  components: {cContentTabs, Userinfo, Password},
  data () {
    const rootSubmenuKeys = []
    menus.forEach(menu => {
      rootSubmenuKeys.push(menu.key)
    })
    return {
      collapsed: false,
      panes: [],
      activeKey: '',
      menus: menus,
      rootSubmenuKeys: rootSubmenuKeys,
      openKeys: [menus[0].key],
      selectedKeys: [],

      visible: false,
      visibleForPassword: false
    }
  },
  computed: {
    nickName: function () {
      return this.currentUser.nickName
    },
    photoUrl: function () {
      return this.currentUser.photoUrl ? this.currentUser.photoUrl : undefined
    }
  },
  methods: {
    onOpenChange (openKeys) {
      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : []
      }
    },
    onClickMenu ({ item, key, keyPath }) {
      let {route, path} = item.$el.dataset
      this.addTab(item.$el.innerHTML, {route, path}, key)
    },
    onChangeTab (activeKey) {
      this.selectedKeys = [activeKey]
      this.activeKey = activeKey
    },
    onRemoveTab (targetKey, activeKey) {
      const panes = this.panes.filter(pane => pane.key !== targetKey)
      this.panes = panes
      this.selectedKeys = [activeKey]
      this.activeKey = activeKey
    },
    addTab (title, {route, path}, key) {
      let panes = this.panes

      let hasKey = false
      panes.forEach((pane, i) => {
        if (pane.key === key) {
          hasKey = true
          this.activeKey = key
        } else {
          delete pane.activeKey
        }
      })

      this.selectedKeys = [key]

      if (!hasKey) {
        panes.push({ title: title, route: route, path: path, key: key })
        this.panes = panes
        this.activeKey = key
      }

      this.$router.push({path})
    },
    onLogout () {
      this.$common.logout()
        .then((res) => {
          this.$message.success('退出成功')
          this.$common.clearToken()
          this.$store.dispatch('user/clearCurrentUser')
          this.$router.push({path: '/login'})
        }).catch((error) => {
          this.$common.clearToken()
          this.$store.dispatch('user/clearCurrentUser')
          this.$router.push({path: '/login'})
          console.log(error)
        }).then(function () {
          // always executed
          console.log('always executed')
        })
    },
    onUserinfo () {
      this.visible = true
    },
    handleOk (user) {
      this.$store.commit('user/setCurrentUser', user)
      this.visible = false
    },
    handleCancel (e) {
      this.visible = false
    },
    onPassword () {
      this.visibleForPassword = true
    },
    handleOkForPassword (user) {
      this.visibleForPassword = false
    },
    handleCancelForPassword (e) {
      this.visibleForPassword = false
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#components-layout {
    height: 100%;
}
#components-layout .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color .3s;
}

#components-layout .trigger:hover {
  color: #1890ff;
}

#components-layout .logo {
  height: 32px;
  background: rgba(255,255,255,.2);
  margin: 16px;
}
#components-layout .header {
  background:slategrey;
  padding: 0;
}
#components-layout .avatar {
  margin: 10px;
  float:right;
}

</style>
